<template>
  <div>
    <div class="panel panel-default">
    <div class="panel-heading panel-title">
      <h1>请发表对Vue的评论</h1>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-3">
          <Add @addItem="addItem"/>
        </div>
        <div class="col-md-7">
          <List :comments="comments" @deleteItem="deleteItem"/>
          <!-- 订阅发布绑定 delete事件 隔代通信 -->
          <!-- <List :comments="comments"/> -->
        </div>
        <div class="col-md-1"></div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import Add from '@/components/Comment/Add.vue'
import List from '@/components/Comment/List.vue'
export default {
  components: {
    Add, List
  },
  data () {
    return {
      // 数据在哪 行为就定义在哪
      comments: [
        {username: 'X1', content: 'Vue很好!'},
        {username: 'X2', content: 'Vue is very good!'},
        {username: 'X3', content: 'Vue is nice!'}
      ]
    }
  },
  methods: {
    addItem (val) {
      this.comments.unshift(val)
    },
    deleteItem (index) {
      this.comments.splice(index, 1)
    }
  }
}
</script>

<style>
.panel-title {
  text-align: center;
}
</style>
